<template>
  <div id="shoppingcar">
    <!-- 购物车
        <p @click="gopaynow">立即支付</p> -->
    <div id="top">
      <h2>购物车</h2>
      <p>
        <span class="iconfont">&#xf0112;</span>
        <span class="iconfont">&#xe71e;</span>
        <i class="line"></i>
      </p>
    </div>
    <!-- 导航 -->
    <nav>
      <a href="#" class="cur"
        >全部(20)
        <i></i>
      </a>
      <a href="#">降价(4)</a>
      <a href="#">常卖(2)</a>
      <a href="#"
        >推荐
        <span class="iconfont icon-shangxia"></span>
      </a>
    </nav>
    <main>
      <div class="shopping">
        <!-- <div class="top">
          <p>
            <input type="radio" />
            <span>小U自营</span>
          </p>
          <p>
            <span>已免运费</span>
            <span>领劵</span>
            <i></i>
          </p>
        </div> -->
        <div class="bottom">
          <div class="box" v-for="(item,index) in list" :key="index">
            <input type="checkbox" v-model="item.istrue" @change="checkinfo"/>
            <img :src="$pre + item.img" alt="" />
            <div class="parameter">
              <p>{{ item.goodsname }} <i @click="cardelete(item.id,index)">删除</i></p>
              <p>七天包退，十五天包换，一年保修</p>
              <!-- <p>
                <select name="ML" id="">
                  <option value="粉色 50ML">粉色 50ML</option>
                  <option value="绿色 50ML">绿色 50ML</option>
                  <option value="蓝色 50ML">蓝色 50ML</option>
                </select>
              </p> -->
              <p>比加入时降低￥100</p>
              <p>
                <i>￥</i>
                <b >{{item.num*item.price}}</b>
                <span @click="addreducenum(item.id, 1,index)">-</span>
                <em>{{ item.num }}</em>
                <span @click="addreducenum(item.id, 2,index)">+</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div id="foot_pay">
      <input type="checkbox" v-model="miancheck" @change="checkall" />
      <p class="box1">全选</p>
      <p class="box2">
        合计
        <span>已免运费</span>
      </p>
      <p class="box3">
        ￥{{price}}
        <span>已优惠两百元</span>
      </p>
      <i @click="orderadd">结算</i>
    </div>
    <!-- <footer>
      <div class="top">
        <input type="radio" />
        <p class="box1">全选</p>
        <p class="box2">
          合计
          <span>已免运费</span>
        </p>
        <p class="box3">
          ￥1998
          <span>已优惠两百元</span>
        </p>
        <i @click="gopaynow">结算</i>
      </div>
      <div class="bottom">
        <p class="cur">
          <span class="iconfont">&#xeb70;</span>
          商城
        </p>
        <p>
          <span class="iconfont">&#xeb70;</span>
          分类
        </p>
        <p>
          <span class="iconfont">&#xeb70;</span>
          购物车
        </p>
        <p>
          <span class="iconfont">&#xeb70;</span>
          我的
        </p>
        <i></i>
      </div>
    </footer> -->
  </div>
</template>

<script>
import {cartedit,cartlist,cartdelete} from '../../utils/api'
export default {
  data() {
    return {
      list:[],
      miancheck:false,
      userinfo: {},
    };
  },
  computed: {
    price(){
      let add=0
      this.list.forEach(item=>{
         if(item.istrue){
          add += item.num*item.price
         }
      })
      return add
    }
  },
  methods: {
    addreducenum(id,num,index){
      cartedit({id:id,type:num}).then(res=>{
       if(res.data.code==200){
          console.log(res);
        if(num==1){
          this.list[index].num--
        }else{
          this.list[index].num++
        }
       }else{
         alert("操作失败")
       }
      })
    },
    checkinfo(){
       this.miancheck=this.list.every(item=> item.istrue)
    },
    checkall(){
      console.log(123);
      this.list.forEach(item=>item.istrue=this.miancheck)
    },
    cardelete(id,index){
      cartdelete({id:id}).then(res=>{
        if(res.data.code==200){
          alert("删除成功")
          this.list.splice(index,1)
        }else{
          alert(res.data.code)
        }
      })
    },
    orderadd(){
      // this.$router.push("/paynow")
       let arr=this.list.filter(item=>{
         return item.istrue
       })
       if(arr==""){
         alert("清勾选商品再结算")
       }else{
         sessionStorage.setItem("orderpay",JSON.stringify({arr,total:this.price}))
         this.$router.push("/paynow")
        // console.log(1);
       }
    }
  },
  mounted() {
    this.userinfo = sessionStorage.getItem("user")? JSON.parse(sessionStorage.getItem("user")):{}
    if(this.userinfo.token){
        cartlist({ uid: this.userinfo.uid }).then(res=>{
          console.log(res)
          let arr=res.data.list?res.data.list:[]
          arr.map(item=>item.istrue=false)
          this.list=arr
          console.log(this.list);
      })
    }
  },
};
</script>

<style scoped>
/*头部*/
#top {
  height: 0.64rem;
  width: 5.5rem;
  padding: 0.28rem 0 0.28rem 2rem;
  background-color: #ff6040;
  display: flex;
  color: #ffdfd8;
  justify-content: space-between;
  align-items: center;
}
#top h2 {
  font-size: 0.32rem;
  margin-right:1rem ;
}
#top p {
  height: 0.64rem;
  width: 1.75rem;
  display: flex;
  border: 1px solid #ff8a6f;
  box-sizing: border-box;
  border-radius: 0.64rem;
  align-items: center;
  position: relative;
}
#top p span {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 0.64rem;
}
#top p .line {
  width: 1px;
  height: 0.38rem;
  position: absolute;
  left: 0.87rem;
  top: 0.13rem;
  background-color: #fff;
}
/*导航*/
nav {
  display: flex;
  height: 0.45rem;
  width: 100%;
  justify-content: space-between;
  background: linear-gradient(#ff6040, #ff887d);
  padding: 0 0.4rem 0 0.4rem;
  position: fixed;
  left: 0;
  top: 1.18rem;
  box-sizing: border-box;
}
nav a {
  color: #fff3f2;
  font-size: 0.26rem;
}
nav a.cur {
  font-size: 0.3rem;
  margin-top: -0.05rem;
  font-weight: bold;
  position: relative;
}
nav a.cur i {
  height: 0.04rem;
  position: absolute;
  width: 0.4rem;
  background-color: #fff;
  bottom: 0;
  left: 0.4rem;
  border-radius: 0.01rem;
}
/*主体*/
main {
  padding: 1.5rem 0 2.55rem 0;
  flex: 1;
  overflow: auto;
}
main .shopping {
  margin-top: 0;
}
main .shopping .top {
  height: 0.72rem;
  background-color: #fff;
  display: flex;
  padding: 0.2rem 0.2rem 0 0.2rem;
  box-sizing: border-box;
  justify-content: space-between;
}
main .shopping .top p:nth-child(1) span {
  font-size: 0.3rem;
  font-weight: bold;
  margin-left: 0.15rem;
}
main .shopping .top p:nth-child(2) {
  position: relative;
  width: 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.22rem;
}
main .shopping .top p:nth-child(2) span:nth-child(2) {
  color: #ff6040;
}
main .shopping .top p:nth-child(2) i {
  height: 0.22rem;
  width: 0.01rem;
  background-color: #979797;
  position: absolute;
  left: 1.28rem;
  top: 0.1rem;
}
main .shopping .bottom {
  background-color: #fff;
  margin-top: 0.2rem;
  padding: 0.2rem 0;
}
main .shopping .bottom .box {
  display: flex;
  height: 2.15rem;
  margin-top: 0.4rem;
}
main .shopping .bottom .box:nth-child(1) {
  margin-top: 0;
}
main .shopping .bottom .box input {
  align-self: center;
  margin-left: 0.2rem;
}
main .shopping .bottom .box img {
  height: 2.15rem;
  width:  2.15rem;
  margin-left: 0.2rem;
}
main .shopping .bottom .box .parameter {
  margin-left: 0.3rem;
}
main .shopping .bottom .box .parameter p:nth-child(1) {
  font-size: 0.3rem;
  margin-top: 0.5rem;
}
main .shopping .bottom .box .parameter p:nth-child(1) i {
  float: right;
  background-color: red;
  font-size:0.3rem ;
  color: #fff;
}
main .shopping .bottom .box .parameter p:nth-child(2) {
  font-size: 0.26rem;
  color: #999999;
}
/* main .shopping .bottom .box .parameter p:nth-child(3) select {
  height: 0.4rem;
  width: 1.47rem;
  display: inline-block;
  font-size: 0.2rem;
  background-color: #f2f2f2;
  border: none;
} */
main .shopping .bottom .box .parameter p:nth-child(3) {
  font: 0.18rem;
  color: #ff6040;
}
main .shopping .bottom .box .parameter p:nth-child(4) {
  font-size: 0.2rem;
  color: #9f9f9f;
}
main .shopping .bottom .box .parameter p:nth-child(4) i {
  font-size: 0.18rem;
  color: #ff6040;
}
main .shopping .bottom .box .parameter p:nth-child(4) b {
  font-size: 0.4rem;
  color: #ff6040;
  font-weight: bold;
}
main .shopping .bottom .box .parameter p:nth-child(4) em {
  display: inline-block;
  width: 0.78rem;
  line-height: 0.6rem;
  background-color: #f2f2f2;
  text-align: center;
  color: #000;
  font-size: 0.4rem;
}
main .shopping .bottom .box .parameter p:nth-child(4) span {
  width: 0.6rem;
  display: inline-block;
  font-size: 0.5rem;
  text-align: center;
  line-height: 0.6rem;
  background-color: #e0dcdc;
  margin: 0 0.1rem;
}
/* footer {
  width: 7.5rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 2.65rem;
} */
#foot_pay {
  width: 100vw;
  background-color: #fff;
  position: fixed;
  bottom: 1.65rem;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1rem;
}
#foot_pay input {
  margin-left: 0.2rem;
}
#foot_pay p {
  font-size: 0.4rem;
  font-weight: bold;
}
#foot_pay p.box1 {
  margin-left: -0.3rem;
}
#foot_pay p.box2,
#foot_pay p.box3 {
  display: flex;
  flex-direction: column;
}
#foot_pay p.box2 {
  align-items: flex-start;
}
#foot_pay p.box3 {
  color: #ff6040;
  align-items: flex-end;
}
#foot_pay p span {
  font-size: 0.2rem;
  color: #a5a5a5;
}
#foot_pay i {
  line-height: 1rem;
  width: 2.2rem;
  background-color: #ff6040;
  font-size: 0.4rem;
  text-align: center;
  color: #fff;
}
/*footer .bottom {
  height: 1.65rem;
  display: flex;
  padding: 0.15rem 0.7rem 0;
  box-sizing: border-box;
  justify-content: space-between;
  position: relative;
}
footer .bottom p {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 0.18rem;
  align-items: center;
  color: #a7a7a7;
}
footer .bottom p.cur {
  font-weight: bold;
  color: #ff6040;
}
footer .bottom p.cur .iconfont {
  color: #ff6040;
}
footer .bottom p .iconfont {
  color: #999;
  font-size: 0.4rem;
}
footer .bottom i {
  width: 2.68rem;
  height: 0.1rem;
  background-color: #000;
  position: absolute;
  bottom: 0.16rem;
  left: 2.6rem;
  border-radius: 0.05rem;
} */
</style>